<template>
    <div class="headInfo">
        <div class="tzSearch">
                    <!-- <span>分类<i class="iconfont icon-xia"></i></span> -->
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{sortName}}<i class="iconfont icon-xia"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" style="padding:0;">
                            <el-dropdown-item v-for="item in data" :key="item.type" :command="item" class="serachSort">{{item.name}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <input type="text" placeholder="请输入关键词或ID" v-model="serachText" @keydown.enter="searchBtn">
                    <span @click="searchBtn" class="searchBtn">搜索</span>
        </div>
    </div>
</template>
<script>
export default {
    name : "searct",
    props:["sortObj"],
    data(){
        return{
            data:[
                {
                    name:"3D模型",
                    type:1,
                    url:"threeMode",
                    path:"/model"
                },
                {
                    name:"SU模型",
                    type:2,
                    url:"skMode",
                    path:"/sumodel"
                },
                {
                    name:"施工图",
                    type:3,
                    url:"constr",
                    path:"/cad"
                },
                {
                    name:"概念方案",
                    type:4,
                    url:"concept",
                    path:"/concept"
                },
                {
                    name:"高清案例",
                    type:7,
                    url:"definition",
                    path:"/works"
                },
                {
                    name:"材质贴图",
                    type:6,
                    url:"czMap",
                    path:"/material"
                },
            ],
            sortName:"分类",//分类显示的名称
            sortType: 0,//分类的类型
            sortUrl:"",
            serachText : "",//搜索内容
            serachPath : "",//搜索内容
        }
    },
    methods:{
        handleCommand(command) {
            this.sortName = command.name;//分类显示的名称
            this.sortType = command.type;//分类的类型
            this.sortUrl = command.url;//要跳转到的页面
            this.serachPath = command.path;
        },
        searchBtn(){//搜索按钮
            if(this.sortType==0){
                this.$message({
                    message: '请选择分类',
                    type: 'error',
                    duration : 1000,
                    showClose :　true,
                    customClass : 'sortAlert'
                });
            }else{
                // this.$router.push({name:this.sortUrl, params: {'searchText': this.serachText}});
                if(!this.serachText){
                    this.$router.push('/'+this.serachPath+'/0/0/0/0/0/0/0/0');
                    this.$emit('searchClick',0);
                }else{
                    this.$router.push({
                        path:this.serachPath,
                        query:{type:this.sortType,catid1:0,catid2:0,style:0,id:0,keys:this.serachText?this.serachText:0,sort:0,vip:0,page:0}}
                    )
                    this.$emit('searchClick',this.serachText);
                }
                
                
                // if(this.$route.path=='/'+this.serachPath){
                    // if(this.$route.path.indexOf(this.serachPath)!=-1){
                        
                    // }
                
            }
            
        }
    },
    created(){
        if(this.sortObj){
            this.sortName = this.sortObj.name;//分类显示的名称
            this.sortType = this.sortObj.type;//分类的类型
            this.sortUrl = this.sortObj.url;//要跳转到的页面
            this.serachPath = this.sortObj.path;
        }
        
    }
}
</script>

<style>
.sortAlert{
    font-size: 50px;
    margin-top: 20%;
}
.serachSort:hover{
    color: #fff!important;
    background: #ea514b!important;
    width: 100%;
}
.headInfo {
    /* width: 100%; */
  height: 71px;
  float: left!important;
}
    .tzSearch span {
  display: inline-block;
  width: 127px;
    background-color: #ea514b;
  line-height: 42px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin-left: -6px;
  vertical-align: top;
  cursor: pointer;
}
.tzSearch .el-dropdown-link{
    display: inline-block;
    width: 96px;
    height: 42px;
    background: #ebebeb;
    color: #1f1f1f;
    font-size: 14px;
    line-height: 42px;
}
.tzSearch span:nth-of-type(1) i{
    font-size: 12px;
    margin-left: 5px;
}
.tzSearch input {
  outline: none;
  width: 424px;
  line-height: 40px;
  padding: 0;
  padding-left: 23px;
  background: #f7f7f7;
  border: 1px solid #e8e8e8;
  border-right: none;
  font-size: 14px;
  margin: 0;
  vertical-align: top;
  margin-left: -6px;
}

.searchText {
  /* position: relative; */
  float: left;
  width: 655px;
}

.tzSearch {
  float: left;
  /* width: 100%; */
  padding: 15px 0px 0 160px;
  margin: 0 auto!important;
  text-align: center;
}
.tzSearch .searchBtn{
    background: #ea514b;
    color: #fff;
    border-radius: 0px 4px 4px 0px;
}
.tzSearch .searchBtn:hover{
    background: #ec817c;
}
.tzSearch .el-dropdown-link{
    border-radius: 4px 0 0 4px;
}
</style>